<template>
    <div>
        <!--头部-->
        <head-components :title="title"></head-components>
        <!--内容-->
        <div class="w-100 d-flex-center" style="flex-direction: column">
            <div class="w-95 d-flex-between-center" v-for="item in appointmentList" style="border-bottom: 2px solid #eceff8; height: 100px">
                <!--内容部分-->
                <div class="d-flex">
                    <div class="mr-12">
                        <div class="fw-7" style="margin-bottom: 10px">{{ item.theme }}</div>
                        <div style="margin-bottom: 5px">
                            <span style="color: #989898">举办单位: {{ item.sponsor }}</span>
                        </div>
                        <div>
                            <span style="color: #989898">举办时间：{{ item.holdingTime }}</span>
                        </div>
                    </div>
                    <div class="bor-primary text-center" style="border-radius: 10px; width: 50px; height: 20px; color: #3c6cf5">
                        {{ item.form }}
                    </div>
                </div>
                <!--按钮部分-->
                <div class="d-flex-between-center">
                    <template></template>
                    <div style="color: #1d8ce0; margin-right: 15px; cursor: pointer" @click="enterAssemblyHall">进入会场</div>
                    <div style="color: #1d8ce0; cursor: pointer" @click="cancelRegistration">取消报名</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import headComponents from '../../mutualSelection/systemManagement/my-components/headComponents.vue';
import HeadComponents from '../../mutualSelection/systemManagement/my-components/headComponents.vue';
export default {
    components: { HeadComponents },
    data() {
        return {
            title: '我的预约',
            appointmentList: [
                { theme: '2023才聚河“洛”·“阳”帆启航百校千岗暨高校毕业生等青年就业服务专项行动', sponsor: '洛阳市引才专区', holdingTime: '2023/11/02 09:00:00 - 2023/11/02 12:00:00', form: '宣讲会' },
                { theme: '2023才聚河“洛”·“阳”帆启航百校千岗暨高校毕业生等青年就业服务专项行动', sponsor: '洛阳市引才专区', holdingTime: '2023/11/02 09:00:00 - 2023/11/02 12:00:00', form: '宣讲会' },
                { theme: '2023才聚河“洛”·“阳”帆启航百校千岗暨高校毕业生等青年就业服务专项行动', sponsor: '洛阳市引才专区', holdingTime: '2023/11/02 09:00:00 - 2023/11/02 12:00:00', form: '宣讲会' },
                { theme: '2023才聚河“洛”·“阳”帆启航百校千岗暨高校毕业生等青年就业服务专项行动', sponsor: '洛阳市引才专区', holdingTime: '2023/11/02 09:00:00 - 2023/11/02 12:00:00', form: '宣讲会' },
                { theme: '2023才聚河“洛”·“阳”帆启航百校千岗暨高校毕业生等青年就业服务专项行动', sponsor: '洛阳市引才专区', holdingTime: '2023/11/02 09:00:00 - 2023/11/02 12:00:00', form: '宣讲会' },
                { theme: '2023才聚河“洛”·“阳”帆启航百校千岗暨高校毕业生等青年就业服务专项行动', sponsor: '洛阳市引才专区', holdingTime: '2023/11/02 09:00:00 - 2023/11/02 12:00:00', form: '宣讲会' }
            ]
        };
    },
    methods: {
        // region TODO 进入会场
        enterAssemblyHall() {
            console.log('进入会场');
        },
        // endregion
        // region TODO 取消报名
        cancelRegistration() {
            console.log('取消报名');
        }
        // endregion
    }
};
</script>
<style scoped></style>
